<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../css/TreeGrid.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
</head>
<body>
    <div class="admin-main">
    <blockquote class="layui-elem-quote">
        <a id="zhankai" href="javascript:;" class="layui-btn layui-btn-small" >
            <i class="layui-icon">&#xe625;</i> 展开
        </a>
        <a id="zhedie" href="javascript:;" class="layui-btn layui-btn-small" >
            <i class="layui-icon">&#xe623;</i> 折叠
        </a>
        <a href="javascript:;" class="layui-btn layui-btn-small" id="addAddress">
            <i class="layui-icon">&#xe608;</i> 添加
        </a>
        <a href="javascript:;" class="layui-btn layui-btn-small" id="editAddress">
            <i class="layui-icon">&#xe642;</i> 编辑
        </a>
        <a href="javascript:;" class="layui-btn layui-btn-small" id="delAddress">
            <i class="layui-icon">&#xe640;</i> 删除
        </a>
    </blockquote><br>
    <fieldset class="layui-elem-field">
        <legend>地区数据</legend>
        <div class="layui-field-box layui-form" id="treegrid"></div>
    </fieldset>
    </div>
    <script type="text/javascript" src="../plugins/layui/layui.js"></script>
    <script type="text/javascript">
        layui.config({
            base: '../extend/'
        });
        var nowRows = null;
        layui.use(['jquery','treetable','layer'],function(){
            var $ = layui.jquery;
            var jQuery = layui.jquery;
            treetable = layui.treetable();
            treetable.init({
                id: "tg1",
                width: "900",
                renderTo: "treegrid",
                headerAlign: "center",
                headerHeight: "auto",
                dataAlign: "left",
                indentation: "20",
                folderOpenIcon: "../images/collapse.png",
                folderCloseIcon: "../images/expand.png",
                defaultLeafIcon: "../images/file.png",
                hoverRowBackground: "false",
                folderColumnIndex: "0",
                treetable_fold_id:"zhedie",
                treetable_open_id:"zhankai",
                is_dynamic_addition:true,
                data_url:'../datas/address.json',
                columns: [
                { "headerText": "", "headerAlign": "center", "dataAlign": "center", "width": "20"},
                { "headerText": "地名", "dataField": "text", "headerAlign": "center", "width":"200"},
                { "headerText": "地标", "dataField": "iconCls", "headerAlign": "center", "dataAlign": "center", "width": "100" },
                { "headerText": "地址", "dataField": "attributes", "headerAlign": "left", "dataAlign": "center"},
                { "headerText": "排序", "dataField": "seq", "headerAlign": "center", "dataAlign": "center", "width": "100" },
                { "headerText": "所属地", "dataField": "ptext", "headerAlign": "center", "dataAlign": "center", "width": "200"}
                ]
            });

            $("#editAddress").click(function(){
                nowRows = treetable.getRows();
                console.log(nowRows);
            });

            layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
            layer = layui.layer;//获取当前窗口的layer对象
            
            $('#addAddress').on('click', function() {
                var con = $('#addMenuTable');
                layer.open({
                    type: 1,
                    title: '添加地址',
                    content: con,
                    anim:-1,
                    skin:'layer-ext-moon',
                    btn: ['确定', '取消'],
                    area: ['700px', '330px'],
                    yes: function(index, layero) {
                        //这是核心的代码。
                    },
                    cancel: function(index, layero){ 
                      if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                        layer.close(index)
                      }
                      return false; 
                    },    
                    shade :[0.5, '#393D49'],
                    maxmin :false
                });
            });//addMenu按钮的结束
        });
    </script>
</body>
<div style="padding:10px;" id="addMenuTable" hidden="hidden">
    <table class="layui-table">
        <tr>
            <td>地址名称</td>
            <td><input id="menuName" type="text" class="layui-input" name="menuName" placeholder="请输入地址名称"></td>
            <td align="center">排序</td>
            <td><input id="menuOrder" type="number" class="layui-input" name="menuOrder" placeholder="请选择地址顺序"></td>
        </tr>
        <tr>
            <td>地址</td>
            <td colspan="4"><input id="menuUrl" type="text" class="layui-input" name="menuUrl" placeholder="请填写地址地址"></td>
        </tr>
        <tr>
            <td>上级地址</td>
            <td><input id="parentMenu" type="text" class="layui-input" name="parentMenu" placeholder="请选择上级地址" onclick="allMenu();"></td>
            <td>地址图标</td>
            <td><input id="menuUrl" type="text" class="layui-input" name="menuUrl" placeholder="请添加地址图标"></td>
        </tr>
    </table>
</div>
</html>